<script lang="ts">
  import { Dynamic, toLove } from '@/api/dynamic';
  import { watchUser } from '@/api/user';
  import { DYNAMIC_DETAIL } from '@/constants/path';
  import { DNYMIC_LIKE_STATUS, FOLLOW_STATUS } from '@/enum/dynamic.enum';
  import { Message } from '@/libs';
  import { computed, defineComponent, PropType, ref } from '@vue/composition-api';
  import UserInfo from './oto-user-header.vue';
  import { dynamicTypeList } from '@/enum/dynamic.enum';

  type PropsType = {
    detail: Dynamic;
    dynamicId: number;
    showFollowButton: boolean;
  };
  export default defineComponent({
    components: {
      UserInfo
    },
    props: {
      detail: {
        type: Object as PropType<PropsType['detail']>,
        require: true,
        default: () => {
          return {
            createTime: '',
            userInfo: null,
            updateTime: '',
            views: 0,
            userId: 0,
            content: '',
            id: 0,
            images: '',
            type: 0,
            love: 0,
            comment: 0,
            loveStatus: DNYMIC_LIKE_STATUS.NOT_LIKED,
            followStatus: FOLLOW_STATUS.NOT_FOLLOW
          } as PropsType['detail'];
        }
      },
      dynamicId: {
        type: Number as PropType<PropsType['dynamicId']>,
        defult: 0
      },
      showFollowButton: {
        type: Boolean as PropType<PropsType['showFollowButton']>,
        default: false
      }
    },
    filters: {
      getTypeText(type: number) {
        let text = '';
        dynamicTypeList.forEach((item) => {
          if (item.value === type) {
            text = item.text;
          }
        });
        return text;
      }
    },
    setup(props, { emit }) {
      const images = computed(() => {
        return props.detail?.images.split(',') || [];
      });

      const time = computed(() => {
        return props.detail?.createTime || '';
      });

      const userInfo = computed(() => {
        return props.detail?.userInfo || {};
      });
      const watchData = ref([
        {
          class: 'love',
          path: {
            0: DYNAMIC_DETAIL.LOVE,
            1: DYNAMIC_DETAIL.LOVED
          }
        },
        {
          class: 'comment-icon',
          path: DYNAMIC_DETAIL.COMMENT
        },
        {
          class: 'share',
          path: DYNAMIC_DETAIL.SHARE
        }
      ]);

      function preview(current: number) {
        uni.previewImage({
          current: current,
          urls: images.value
        });
      }

      function loveChange(loveStatus: DNYMIC_LIKE_STATUS, love: number) {
        emit('update:detail', {
          ...props.detail,
          loveStatus,
          love
        });
      }

      function doLike() {
        toLove(Number(props.dynamicId)).then((res) => {
          if (res.data.status === DNYMIC_LIKE_STATUS.LIKED) {
            if (typeof props.detail?.love === 'number' && props.detail?.love >= 0) {
              loveChange(DNYMIC_LIKE_STATUS.LIKED, props.detail.love + 1);
            }
          }
          if (res.data.status === DNYMIC_LIKE_STATUS.NOT_LIKED) {
            if (typeof props.detail?.love === 'number' && props.detail?.love >= 0) {
              loveChange(DNYMIC_LIKE_STATUS.NOT_LIKED, props.detail.love - 1);
            }
          }
        });
      }

      function openCommentInput() {
        emit('openCommentInput');
      }

      function watchDataClick(type: string) {
        switch (type) {
          case 'love':
            doLike();
            break;
          case 'comment-icon':
            openCommentInput();
            break;
          default:
            break;
        }
      }

      function emitChangeFollowStatus(followStatus: FOLLOW_STATUS) {
        emit('update:detail', {
          ...props.detail,
          followStatus: followStatus
        } as Dynamic);
      }

      function changeFollowStatus(status: FOLLOW_STATUS) {
        console.log('detail.value!.userId', props.detail?.userId);
        watchUser(props.detail.userId)
          .then((res) => {
            console.log(res);
            emitChangeFollowStatus(status);
            if (status === FOLLOW_STATUS.FOLLOW) {
              Message.success('关注成功');
            } else {
              Message.success('取消关注成功');
            }
          })
          .catch((err) => {
            console.error(err);
          });
      }

      return {
        images,
        userInfo,
        time,
        watchData,
        preview,
        watchDataClick,
        openCommentInput,
        changeFollowStatus
      };
    }
  });
</script>

<template>
  <view class="dynamic-card">
    <view class="user">
      <user-info
        :userInfo="detail.userInfo"
        :other-data="{
          time: time,
          status: detail.followStatus
        }"
        @changeFollowStatus="changeFollowStatus"
        :showFollowButton="showFollowButton"
      />
    </view>
    <view class="content"> {{ detail.content }}</view>
    <text class="tips"> #{{ detail.type | getTypeText }}#</text>
    <view class="images">
      <view class="one" v-if="images.length <= 1">
        <template v-for="(item, index) in images">
          <image class="images-item" :key="index" :src="item" @click.stop="preview(index)" />
        </template>
      </view>
      <view class="two" v-if="images.length === 2">
        <template v-for="(item, index) in images">
          <image class="images-item" :key="index" :src="item" @click.stop="preview(index)" />
        </template>
      </view>
      <view class="three" v-if="images.length === 3">
        <template v-for="(item, index) in images">
          <image class="images-item" :key="index" :src="item" @click.stop="preview(index)" />
        </template>
      </view>
      <view class="more" v-if="images.length > 3">
        <template v-for="(item, index) in images">
          <image class="images-item" :key="index" :src="item" @click.stop="preview(index)" />
        </template>
      </view>
    </view>
    <view class="other-data">
      <view class="read">浏览{{ (detail.views || 0) | getThousandFormat }}次</view>
      <view class="watch-data">
        <view
          class="watch-data-item"
          :class="item.class"
          v-for="(item, index) in watchData"
          :key="index"
          @click.stop="watchDataClick(item.class)"
        >
          <template v-if="item.class === 'love'">
            <image :src="item.path[detail.loveStatus]" />
            <text>{{ detail.love }}</text>
          </template>
          <image v-else :src="item.path" />
          <text v-if="item.class === 'comment-icon'">{{ detail.comment }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .dynamic-card {
    .user {
      margin-top: 20rpx;
    }

    .content {
      /* 小标题 */
      margin-top: 20rpx;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 32rpx;
      line-height: 45rpx;
      /* identical to box height */

      /* 主要文字 */

      color: #333333;
    }
    .tips {
      /* 小标题 */

      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 45rpx;
      /* identical to box height */

      /* 主题色 */

      color: #81d8de;
    }

    .images {
      margin-top: 20rpx;

      .images-item {
        border-radius: 8rpx;
        background: #c4c4c4;
      }

      .one {
        .images-item {
          width: 100%;
          border-radius: 12rpx;
          height: 686rpx;
          overflow: hidden;
        }
      }

      .two {
        display: flex;
        .images-item {
          width: 300rpx;
          height: 400rpx;
          border-radius: 8rpx;
          &:first-child {
            margin-right: 20rpx;
          }
        }
      }

      .three {
        display: flex;
        margin-left: -10rpx;

        .images-item {
          flex: 33.3%;
          height: 300rpx;
          margin-left: 10rpx;
        }
      }

      .more {
        margin-left: -17rpx;
        margin-top: -17rpx;

        .images-item {
          display: inline-block;
          margin-left: 17rpx;
          margin-top: 17rpx;
          width: 217rpx;
          height: 200rpx;
        }
      }
    }

    .other-data {
      margin-top: 38rpx;
      display: flex;
      justify-content: space-between;
      .read {
        /* 说明文字（大） */

        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 34rpx;
        /* identical to box height */

        /* 次要文字 */

        color: #999999;
      }

      .watch-data {
        display: flex;
        &-item {
          display: flex;
          align-items: center;

          &:not(:first-child) {
            margin-left: 37rpx;
          }

          image {
            width: 48rpx;
            height: 48rpx;
          }
        }
      }
    }
  }
</style>
